<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document and website structure | jzhmcoo1</title><meta name="keywords" content="Web,Document structure"><meta name="author" content="lixing"><meta name="copyright" content="lixing"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="An aritcle reprinted from MDN">
<meta property="og:type" content="article">
<meta property="og:title" content="Document and website structure">
<meta property="og:url" content="https://www.lihangzhu.com/2020/04/01/Document-and-website-structure/index.html">
<meta property="og:site_name" content="jzhmcoo1">
<meta property="og:description" content="An aritcle reprinted from MDN">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/documentand.png">
<meta property="article:published_time" content="2020-04-01T15:58:42.000Z">
<meta property="article:modified_time" content="2020-04-22T14:15:03.600Z">
<meta property="article:author" content="lixing">
<meta property="article:tag" content="Web">
<meta property="article:tag" content="Document structure">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/documentand.png"><link rel="shortcut icon" href="/images/favicon.png"><link rel="canonical" href="https://www.lihangzhu.com/2020/04/01/Document-and-website-structure/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta name="google-site-verification" content="pcqGakY4hww-Mg9iGN4mQw6v_y_IRvYmM1l50SAcPpg"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isanchor: true
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = { 
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2020-04-22 22:15:03'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
          const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
          const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
          const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified

          if (t === undefined) {
            if (isLightMode) activateLightMode()
            else if (isDarkMode) activateDarkMode()
            else if (isNotSpecified || hasNoSupport) {
              const now = new Date()
              const hour = now.getHours()
              const isNight = hour <= 6 || hour >= 18
              isNight ? activateDarkMode() : activateLightMode()
            }
            window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
              if (saveToLocal.get('theme') === undefined) {
                e.matches ? activateDarkMode() : activateLightMode()
              }
            })
          } else if (t === 'light') activateLightMode()
          else activateDarkMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const fontSizeVal = saveToLocal.get('global-font-size')
    if (fontSizeVal !== undefined) {
      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
    }
    })(window)</script><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="jzhmcoo1" type="application/atom+xml">
</head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">36</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">37</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">9</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-heartbeat"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/message/"><i class="fa-fw fa fa-coffee"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-user-friends"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于我</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/documentand.png')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">jzhmcoo1</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-heartbeat"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/message/"><i class="fa-fw fa fa-coffee"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-user-friends"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于我</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Document and website structure</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2020-04-01T15:58:42.000Z" title="发表于 2020-04-01 23:58:42">2020-04-01</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2020-04-22T14:15:03.600Z" title="更新于 2020-04-22 22:15:03">2020-04-22</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/StudyNotes/">StudyNotes</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/StudyNotes/WebDevelopment/">WebDevelopment</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.8k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>17分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Document-and-website-structure"><a href="#Document-and-website-structure" class="headerlink" title="Document and website structure"></a>Document and website structure</h1><h2 id="Written-in-front"><a href="#Written-in-front" class="headerlink" title="Written in front"></a>Written in front</h2><p>Recently, I’ve been reading this article. And I  just started learning HTML . I don’t know much about HTML tags, and liked using <code>&lt;div&gt;</code>s a lot, which made me almost crazy maintaining my website. </p>
<p>The article is great. It’s easy for me, a greenhorn in web development to understand. It clearly tells the functions of these tags, and when to use it. I read the English version on <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">MDN</a>, and make some note in it for better understanding, and for learning English.</p>
<blockquote>
<p>Original Article:  <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">MDN</a></p>
</blockquote>
<hr>
<blockquote>
<p>In addition to defining individual parts of your page (such as “a paragrapgh” or “an image”),</p>
<p>HTML also boasts a number of block level elements used to define areas of your website (such as “the header”, “the navigation menu”, “the main content column”).</p>
<p>This article looks into how to plan a basic website struture, and write the HTML to represent this structure.</p>
</blockquote>
<h2 id="Basic-section-of-a-document"><a href="#Basic-section-of-a-document" class="headerlink" title="Basic section of a document"></a>Basic section of a document</h2><p>Webpages can and will look pretty different from one another, but they all tend to share similar standard components, unless the page is displaying a fullscreen video or game, is part of some kind of art project, or is just badly structured.</p>
<ul>
<li>header</li>
<li>navigation bar</li>
<li>Main content</li>
<li>sidebar</li>
<li>footer</li>
</ul>
<h3 id="header"><a href="#header" class="headerlink" title="header"></a>header</h3><p>Usually a big strip across the top with a big heading, logo, and perhaps a ==tagline（品牌口号标语）==. This usually stays the same from one webpage to another.</p>
<h3 id="navigation-bar"><a href="#navigation-bar" class="headerlink" title="navigation bar:"></a>navigation bar:</h3><p>Links to the site’s main sections; usually represented by menu buttons, links, or tabs. Like the header, this content usually remains consistent from one webpage to another — having inconsistent navigation on your website will just lead to confused, frustrated users. </p>
<h3 id="Main-content"><a href="#Main-content" class="headerlink" title="Main content"></a>Main content</h3><p>A big area in the center that contains most of the unique content of a given webpage, for example, the video you want to watch, or the main story you’re reading, or the map you want to view, or the news headlines, etc. This is the one part of the website that definitely will vary from page to page!</p>
<h3 id="Sidebar"><a href="#Sidebar" class="headerlink" title="Sidebar"></a>Sidebar</h3><p>Some ==peripheral（外部的）== info, links, quotes, ads, etc. Usually, this is contextual to what is contained in the main content (for example on a news article page, the sidebar might contain the author’s bio, or links to related articles) but there are also cases where you’ll find some recurring elements like a secondary navigation system.</p>
<h3 id="Footer"><a href="#Footer" class="headerlink" title="Footer"></a>Footer</h3><p>A strip across the bottom of the page that generally contains fine print, copyright notices, or contact info. It’s a place to put common information (like the header) but usually, that information is not critical or secondary to the website itself. The footer is also sometimes used for SEO purposes, by providing links for quick access to popular content.</p>
<h2 id="HTML-for-structuring-content"><a href="#HTML-for-structuring-content" class="headerlink" title="HTML for structuring content"></a>HTML for structuring content</h2><p>With the right CSS, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect ==semantics（语义）== and <strong>use the right element for the right job</strong>.</p>
<p>This is because visuals don’t tell the whole story. We use color and font size to draw sighted users’ attention to the most useful parts of the content, like the navigation menu and related links, but what about ==visually impaired people(视障者)== for example, who might not find concepts like “pink” and “large font” very useful?</p>
<p>In your HTML code, you can mark up sections of content based on their <em>functionality</em> — you can use elements that represent the sections of content described above ==unambiguously（明确地）==, and ==assistive（辅助的）== technologies like screenreaders can recognise those elements and help with tasks like “find the main navigation”, or “find the main content.” As we mentioned earlier in the course, there are a number of <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">consequences of not using the right element structure and semantics for the right job</a>.</p>
<p>To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:</p>
<ul>
<li><strong>header:</strong><code>&lt;header&gt;</code></li>
<li><strong>navigation bar:</strong><code>&lt;nav&gt;</code></li>
<li><strong>main content</strong>:<code>&lt;main&gt;</code>, with various content ==subsections（小节）== represented by <code>&lt;article&gt;</code>, <code>&lt;section&gt;</code>, and <code>&lt;div&gt;</code> elements.</li>
<li><strong>sidebar:</strong><code>&lt;aside&gt;</code>, often placed inside <code>&lt;main&gt;</code>.</li>
<li><strong>footer:</strong><code>&lt;footer&gt;</code>.</li>
</ul>
<blockquote>
<p>An example</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>My page title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">&quot;https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;style.css&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer--&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--[if lt IE 9]&gt;</span></span><br><span class="line"><span class="comment">      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="comment">    &lt;![endif]--&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- Here is our main header that is used across all the pages of our website --&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">header</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Header<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">nav</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>Home<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>Our team<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>Projects<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>Contact<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line">       <span class="comment">&lt;!-- A Search form is another commmon non-linear way to navigate through a website. --&gt;</span></span><br><span class="line"></span><br><span class="line">       <span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;search&quot;</span> <span class="attr">name</span>=<span class="string">&quot;q&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;Search query&quot;</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">value</span>=<span class="string">&quot;Go!&quot;</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- Here is our page&#x27;s main content --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">main</span>&gt;</span></span><br><span class="line"></span><br><span class="line">      <span class="comment">&lt;!-- It contains an article --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">article</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>Article heading<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">h3</span>&gt;</span>Subsection<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">h3</span>&gt;</span>Another subsection<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br><span class="line"></span><br><span class="line">      <span class="comment">&lt;!-- the aside content can also be nested within the main content --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">aside</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>Related<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>Oh I do like to be beside the seaside<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>Oh I do like to be beside the sea<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>Although in the North of England<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>It never stops raining<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>Oh well...<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">aside</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- And here is our main footer that is used across all the pages of our website --&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">footer</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span>&gt;</span>©Copyright 2050 by nobody. All rights reversed.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>We aren’t asking you to do much else in this article, because <strong>the key to understanding document layout is writing a sound HTML structure, and then laying it out with CSS.</strong> </p>
<h2 id="HTML-layout-elements-in-more-detail"><a href="#HTML-layout-elements-in-more-detail" class="headerlink" title="HTML layout elements in more detail"></a>HTML layout elements in more detail</h2><ul>
<li><p><code>&lt;main&gt;</code> is for content <em>unique to this page</em>. Use <code>&lt;main&gt;</code> only once per page, and put it directly inside <code>&lt;body&gt;</code>. Ideally this shouldn’t be nested within other elements.</p>
</li>
<li><p><code>&lt;article&gt;</code> encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).</p>
</li>
<li><p><code>&lt;section&gt;</code> is similar to <code>&lt;article&gt;</code>, but it is more for grouping together a single part of the page that ==constitutes one single piece of functionality== (e.g., a mini map, or a set of article headlines and summaries). It’s considered best practice to begin each section with a heading; also note that you can break <code>&lt;article&gt;</code>s up into different <code>&lt;section&gt;</code>s, or <code>&lt;section&gt;</code>s up into different <code>&lt;article&gt;</code>s,depending on the context.</p>
</li>
<li><p><code>&lt;aside&gt;</code> contains content that is not directly related to the main content but can provide addtional information indirectly related to it (==glossary entries(词汇表条目)==, ==author biography(作者传记)==, related links, etc.).</p>
</li>
<li><p><code>&lt;header&gt;</code> represents a group of introductory content. If it is a child of <code>&lt;body&gt;</code> it defines the global header of a webpage, but if it’s a child of an <code>&lt;article&gt;</code> or <code>&lt;section&gt;</code> it defines a specific header for that section (try not to confuse this with titles and headings).</p>
</li>
<li><p><code>&lt;nav&gt;</code> contains the main navigation functionally for the page.</p>
<p>  Secondary links, etc., would not go in the navigation.</p>
</li>
<li><p><code>&lt;footer&gt;</code>represents a group of end content for a page.</p>
</li>
</ul>
<h2 id="Non-semantic-wrappers"><a href="#Non-semantic-wrappers" class="headerlink" title="Non-semantic wrappers"></a>Non-semantic wrappers</h2><p>Sometimes you’ll come across a situation where you can’t find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some CSS or JavaScript. For cases like these, HTML provides the <code>&lt;div&gt;</code> and <code>&lt;span&gt;</code> elements. You should use these preferably with a suitable class attribute, to provide some kind of label for them so they can be easily targeted.</p>
<p><code>&lt;span&gt;</code>  is an inline non-semantic element, which you should only use if you can’t think of a better semantic text element to wrap your content, or don’t want to add any specific meaning. For example:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid</span><br><span class="line">him as he staggered through the door <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;editor-note&quot;</span>&gt;</span>[Editor&#x27;s note: At this point in the</span><br><span class="line">play, the lights should be down low]<span class="tag">&lt;/<span class="name">span</span>&gt;</span>.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>In this case, the editor’s note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. For sighted users, CSS would perhaps be used to distance the note slightly from the main text.</p>
<p><code>&lt;div&gt;</code> is a block level non-semantic element, which you should only use if you can’t think of a better semantic block element to use, or don’t want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;shopping-cart&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>Shopping cart<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">strong</span>&gt;</span>Silver earrings<span class="tag">&lt;/<span class="name">strong</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span>: $99.95.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;../products/3333-0985/thumb.png&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;Silver earrings&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">      ...</span><br><span class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>Total cost: $237.89<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>This isn’t really an <code>&lt;aside&gt;</code>, as it doesn’t necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn’t even particularly warrant using a <code>&lt;section&gt;</code>, as it isn’t part of the main content of the page. So a <code>&lt;div&gt;</code> is fine in this case. </p>
<blockquote>
<p><strong>Warning</strong>: Divs are so convenient to use that it’s easy to use them too much. As they carry no semantic value, they just ==clutter(混乱）== your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you’ll have a hard time updating and maintaining your documents.</p>
</blockquote>
<h2 id="Line-breaks-and-horizontal-rules"><a href="#Line-breaks-and-horizontal-rules" class="headerlink" title="Line breaks and horizontal rules"></a>Line breaks and horizontal rules</h2><p>Two elements that you’ll use occasionally and will want to know about are <code>&lt;br&gt;</code> and <code>&lt;hr&gt;</code>:</p>
<p><code>&lt;br&gt; </code> creates a line break in a paragraph; it is the only way to force a ==rigid structure（刚性结构）== in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>There once was a man named O&#x27;Dell<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">Who loved to write HTML<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">But his structure was bad, his semantics were sad<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">and his markup didn&#x27;t read very well.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>Without the <code>&lt;br&gt;</code> elements, the paragraph would just be rendered in one long line (HTML ignores most whitespace); with <code>&lt;br&gt;</code> elements in the code, the markup renders like this:</p>
<blockquote>
<p>There once was a man named O’Dell<br>Who loved to write HTML<br>But his structure was bad, his semantics were sad<br>and his markup didn’t read very well.</p>
</blockquote>
<p><code>&lt;hr&gt;</code> elements create a horizontal rule in the document that ==denotes a thematic change（表示主题变化）== in the text (such as a change in topic or scene)。</p>
<h2 id="Planning-a-simple-website"><a href="#Planning-a-simple-website" class="headerlink" title="Planning a simple website"></a>Planning a simple website</h2><p>Once you’ve planned out the structure of a simple webpage, the next logical step is to try to work out what content you want to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best possible user experience. This is called <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/Information_architecture">Information architecture</a>. In a large, complex website, a lot of planning can go into this process, but for a simple website of a few pages, this can be fairly simple, and fun!</p>
<ol>
<li>Bear in mind that you’ll have a few elements common to most (if not all) pages — such as the navigation menu, and the footer content. If your site is for a business, for example, it’s a good idea to have your contact information available in the footer on each page. Note down what you want to have common to every page.</li>
<li>Next, draw a rough sketch of what you might want the structure of each page to look like (it might look like our simple website above). Note what each block is going to be.</li>
<li>Now, brainstorm all the other (not common to every page) content you want to have on your website — write a big list down.</li>
<li>Next, try to sort all these content items into groups, to give you an idea of what parts might ==live together on different pages（在不同页面上一起显示）==. This is very similar to a technique called <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/Card_sorting">Card sorting</a>.(卡片分类)</li>
<li>Now try to sketch a rough sitemap — have a bubble for each page on your site, and draw lines to show the typical workflow between pages. The homepage will probably be in the center, and link to most if not all of the others; most of the pages in a small site should be available from the main navigation, although there are exceptions. You might also want to include notes about how things might be presented.</li>
</ol>
</article><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Web/">Web</a><a class="post-meta__tags" href="/tags/Document-structure/">Document structure</a></div><div class="post_share"><div class="social-share" data-image="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/documentand.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2020/04/17/CSS-Selectors-I/"><img class="prev-cover" data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/css.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">CSS selectors I</div></div></a></div><div class="next-post pull-right"><a href="/2020/03/10/Simple-Markdown-Syntax/"><img class="next-cover" data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/markdown.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">简单的Markdown语法总结</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2020/04/17/CSS-Selectors-I/" title="CSS selectors I"><img class="cover" data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/css.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-04-17</div><div class="title">CSS selectors I</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">lixing</div><div class="author-info__description">👨🏻‍💻 好好学习，天天敲代码 👩🏻‍💻</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">36</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">37</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">9</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/jzhmcoo1"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/jzhmcoo1" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:jzhmzlxocoo1@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="/atom.xml" target="_blank" title="RSS"><i class="fa fa-rss"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">真正的大师,永远都怀着一颗学徒的心</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Document-and-website-structure"><span class="toc-number">1.</span> <span class="toc-text">Document and website structure</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Written-in-front"><span class="toc-number">1.1.</span> <span class="toc-text">Written in front</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Basic-section-of-a-document"><span class="toc-number">1.2.</span> <span class="toc-text">Basic section of a document</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#header"><span class="toc-number">1.2.1.</span> <span class="toc-text">header</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#navigation-bar"><span class="toc-number">1.2.2.</span> <span class="toc-text">navigation bar:</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Main-content"><span class="toc-number">1.2.3.</span> <span class="toc-text">Main content</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Sidebar"><span class="toc-number">1.2.4.</span> <span class="toc-text">Sidebar</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Footer"><span class="toc-number">1.2.5.</span> <span class="toc-text">Footer</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML-for-structuring-content"><span class="toc-number">1.3.</span> <span class="toc-text">HTML for structuring content</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML-layout-elements-in-more-detail"><span class="toc-number">1.4.</span> <span class="toc-text">HTML layout elements in more detail</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Non-semantic-wrappers"><span class="toc-number">1.5.</span> <span class="toc-text">Non-semantic wrappers</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Line-breaks-and-horizontal-rules"><span class="toc-number">1.6.</span> <span class="toc-text">Line breaks and horizontal rules</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Planning-a-simple-website"><span class="toc-number">1.7.</span> <span class="toc-text">Planning a simple website</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2021/08/01/%E8%B7%A8%E5%9F%9F/" title="跨域问题"><img data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210801204426-browser.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="跨域问题"/></a><div class="content"><a class="title" href="/2021/08/01/%E8%B7%A8%E5%9F%9F/" title="跨域问题">跨域问题</a><time datetime="2021-08-01T12:42:27.000Z" title="发表于 2021-08-01 20:42:27">2021-08-01</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/06/26/Css-Core-Concepts/" title="css关键概念"><img data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/css.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="css关键概念"/></a><div class="content"><a class="title" href="/2021/06/26/Css-Core-Concepts/" title="css关键概念">css关键概念</a><time datetime="2021-06-26T02:53:41.000Z" title="发表于 2021-06-26 10:53:41">2021-06-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/06/21/Cpp-OJ-Environment/" title="C++OJ环境搭建"><img data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210621082947.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="C++OJ环境搭建"/></a><div class="content"><a class="title" href="/2021/06/21/Cpp-OJ-Environment/" title="C++OJ环境搭建">C++OJ环境搭建</a><time datetime="2021-06-21T00:28:12.000Z" title="发表于 2021-06-21 08:28:12">2021-06-21</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/06/20/Browser-Cache/" title="浏览器的强缓存和协商缓存"><img data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210620222035.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="浏览器的强缓存和协商缓存"/></a><div class="content"><a class="title" href="/2021/06/20/Browser-Cache/" title="浏览器的强缓存和协商缓存">浏览器的强缓存和协商缓存</a><time datetime="2021-06-20T14:18:05.000Z" title="发表于 2021-06-20 22:18:05">2021-06-20</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/06/17/Sorting/" title="排序算法汇总"><img data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210617235208-sorting.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="排序算法汇总"/></a><div class="content"><a class="title" href="/2021/06/17/Sorting/" title="排序算法汇总">排序算法汇总</a><time datetime="2021-06-17T15:53:46.000Z" title="发表于 2021-06-17 23:53:46">2021-06-17</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2021 By lixing</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><a target="_blank" rel="noopener" href="http://www.beian.miit.gov.cn/"><img class="icp-icon" src="/images/icp.png"><span>备案号：沪ICP备20019376号-1</span></a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>function loadValine () {
  function initValine () {
    let initData = {
      el: '#vcomment',
      appId: 'eLIUaG0QmIrM06RLR7ib4AWK-gzGzoHsz',
      appKey: '4WOHEFT9gxfwKDLWQ3Dlc1xi',
      placeholder: '英雄别着急走,留下姓名~',
      avatar: 'monsterid',
      meta: 'nick,mail,link'.split(','),
      pageSize: '10',
      lang: 'zh-CN',
      recordIP: false,
      serverURLs: '',
      emojiCDN: 'https://i0.hdslb.com/bfs/emote/',
      emojiMaps: {"2020":"dc709fac0d361370bcf0d36d32adb97df7c95824.png@112w_112h.png","热词系列_知识增加":"142409b595982b8210b2958f3d340f3b47942645.png@112w_112h.png","热词系列_梦幻联动":"4809416be5ca787c2ec3e897e4fd022a58da6e0e.png@112w_112h.png","热词系列_希望没事":"6c0d2e6c486d1ba5afd6204a96e102652464a01d.png@112w_112h.png","热词系列_泪目":"bba3703ab90b7d16fe9dbcb85ed949db687f8331.png@112w_112h.png","热词系列_保护":"55f8f6445ca7c3170cdfc5b16036abf639ce9b57.png@112w_112h.png","热词系列_害怕":"d77e2de26da143249f0c0ad7a608c27152c985bf.png@112w_112h.png","热词系列_爱了爱了":"2a165b555ba20391316366c664ed7891883dc5aa.png@112w_112h.png","热词系列_吹爆":"b528220f9c37256ed6a37f05bf118e44b08b81e5.png@112w_112h.png","热词系列_三连":"21f15fe11b7a84d2f2121c16dec50a4e4556f865.png@112w_112h.png","热词系列_可以":"e08543c71202b36c590094417fcfbb80c3506cd8.png@112w_112h.png","热词系列_打卡":"a9cf77c78e1b9b40aa3ed4862402fba008ee2f51.png@112w_112h.png","热词系列_妙啊":"0e98299d7decf5eaffad854977946075c3e91cb8.png@112w_112h.png","热词系列_这次一定":"a01ca28923daa7cc896c42f27deb4914e20dd572.png@112w_112h.png","热词系列_AWSL":"c37f88cf799f9badf9d84b7671dc3dd98c0fc0c2.png@112w_112h.png","热词系列_递话筒":"98e6950e39fbb4dd1c576042063ca632074070ba.png@112w_112h.png","热词系列_你细品":"535e00658e7e47966f154d3a167fa2365ebc4321.png@112w_112h.png","热词系列_咕咕":"d8065c2e7ce48c929317a94553499a46fecc262a.png@112w_112h.png","热词系列_你可真星":"54c8ddff400abfe388060cabfbb579280fdea1be.png@112w_112h.png","热词系列_标准结局":"3de98174b510cf7dc5fd1bd08c5d881065e79137.png@112w_112h.png","热词系列_危":"5cc6c3357c4df544dd8de9d5c5c0cec97c7c9a56.png@112w_112h.png","热词系列_张三":"255a938f39cea625032b6650036b31aa26c50a3c.png@112w_112h.png","热词系列_害":"cbe798a194612958537c5282fcca7c3bcd2aa15c.png@112w_112h.png","热词系列_我裂开了":"29bd57ec4e8952880fea6c9e47aee924e91f10c4.png@112w_112h.png","热词系列_有内味了":"7ca61680a905b5b6e2e335c630e725b648b03b4d.png@112w_112h.png","热词系列_猛男必看":"c97064450528a0e45c7e7c365a15fbb13fd61d8c.png@112w_112h.png","热词系列_奥力给":"c9b8683827ec6c00fea5327c9bec14f581cef2aa.png@112w_112h.png","热词系列_问号":"c1d1e76c12180adc8558f47006fe0e7ded4154bb.png@112w_112h.png","热词系列_我哭了":"9e0b3877d649aaf6538fbdd3f937e240a9d808e4.png@112w_112h.png","热词系列_高产":"9db817cba4a7f4a42398f3b2ec7c0a8e0c247c42.png@112w_112h.png","热词系列_我酸了":"a8cbf3f6b8cd9377eeb15b9172f3cd683b2e4650.png@112w_112h.png","热词系列_真香":"e68497c775feaac1c3b1a6cd63a50cfb11b767c4.png@112w_112h.png","热词系列_我全都要":"d424d1ad8d14c1c9b8367842bc68c658b9229bc1.png@112w_112h.png","热词系列_神仙UP":"a49e0d0db1e7d35a0f7411be13208951ab448f03.png@112w_112h.png","热词系列_你币有了":"84820c2b147a8ca02f3c4006b63f76c6313cbfa0.png@112w_112h.png","热词系列_不愧是你":"9ff2e356797c57ee3b1675ade0883d2d2247be9b.png@112w_112h.png","热词系列_锤":"35668cc12ae25b9545420e4a85bf21a0bfc03e5d.png@112w_112h.png","热词系列_秀":"50782fbf5d9b7f48f9467b5c53932981e321eedc.png@112w_112h.png","热词系列_爷关更":"faad40c56447f1f8abcb4045c17ce159d113d1fd.png@112w_112h.png","热词系列_有生之年":"f41fdafe2d0fbb8e8bc1598d2cf37e355560103a.png@112w_112h.png","热词系列_镇站之宝":"24e7a6a6e6383c987215fb905e3ee070aca259b5.png@112w_112h.png","热词系列_我太南了":"a523f3e4c63e4db1232365765d0ec452f83be97e.png@112w_112h.png","热词系列_完结撒花":"ea9db62ff5bca8e069cd70c4233353a802835422.png@112w_112h.png","热词系列_大师球":"f30089248dd137c568edabcb07cf67e0f6e98cf3.png@112w_112h.png","热词系列_知识盲区":"ccc94600b321a28116081e49ecedaa4ee8728312.png@112w_112h.png","热词系列_“狼火”":"33ccd3617bfa89e9d1498b13b7542b63f163e5de.png@112w_112h.png","口罩":"3ad2f66b151496d2a5fb0a8ea75f32265d778dd3.png@112w_112h.png","微笑":"685612eadc33f6bc233776c6241813385844f182.png@112w_112h.png","笑":"81edf17314cea3b48674312b4364df44d5c01f17.png@112w_112h.png","呲牙":"b5a5898491944a4268360f2e7a84623149672eb6.png@112w_112h.png","OK":"4683fd9ffc925fa6423110979d7dcac5eda297f4.png@112w_112h.png","星星眼":"63c9d1a31c0da745b61cdb35e0ecb28635675db2.png@112w_112h.png","哦呼":"362bded07ea5434886271d23fa25f5d85d8af06c.png@112w_112h.png","嫌弃":"de4c0783aaa60ec03de0a2b90858927bfad7154b.png@112w_112h.png","喜欢":"8a10a4d73a89f665feff3d46ca56e83dc68f9eb8.png@112w_112h.png","酸了":"92b1c8cbceea3ae0e8e32253ea414783e8ba7806.png@112w_112h.png","大哭":"2caafee2e5db4db72104650d87810cc2c123fc86.png@112w_112h.png","害羞":"9d2ec4e1fbd6cb1b4d12d2bbbdd124ccb83ddfda.png@112w_112h.png","无语":"44667b7d9349957e903b1b62cb91fb9b13720f04.png@112w_112h.png","疑惑":"b7840db4b1f9f4726b7cb23c0972720c1698d661.png@112w_112h.png","调皮":"8290b7308325e3179d2154327c85640af1528617.png@112w_112h.png","喜极而泣":"485a7e0c01c2d70707daae53bee4a9e2e31ef1ed.png@112w_112h.png","奸笑":"bb84906573472f0a84cebad1e9000eb6164a6f5a.png@112w_112h.png","偷笑":"6c49d226e76c42cd8002abc47b3112bc5a92f66a.png@112w_112h.png","大笑":"ca94ad1c7e6dac895eb5b33b7836b634c614d1c0.png@112w_112h.png","阴险":"ba8d5f8e7d136d59aab52c40fd3b8a43419eb03c.png@112w_112h.png","捂脸":"6921bb43f0c634870b92f4a8ad41dada94a5296d.png@112w_112h.png","囧":"12e41d357a9807cc80ef1e1ed258127fcc791424.png@112w_112h.png","呆":"33ad6000d9f9f168a0976bc60937786f239e5d8c.png@112w_112h.png","抠鼻":"cb89184c97e3f6d50acfd7961c313ce50360d70f.png@112w_112h.png","惊喜":"0afecaf3a3499479af946f29749e1a6c285b6f65.png@112w_112h.png","惊讶":"f8e9a59cad52ae1a19622805696a35f0a0d853f3.png@112w_112h.png","笑哭":"c3043ba94babf824dea03ce500d0e73763bf4f40.png@112w_112h.png","妙啊":"b4cb77159d58614a9b787b91b1cd22a81f383535.png@112w_112h.png","doge":"bba7c12aa51fed0199c241465560dfc2714c593e.png@112w_112h.png","滑稽":"d15121545a99ac46774f1f4465b895fe2d1411c3.png@112w_112h.png","吃瓜":"4191ce3c44c2b3df8fd97c33f85d3ab15f4f3c84.png@112w_112h.png","打call":"431432c43da3ee5aab5b0e4f8931953e649e9975.png@112w_112h.png","点赞":"1a67265993913f4c35d15a6028a30724e83e7d35.png@112w_112h.png","鼓掌":"895d1fc616b4b6c830cf96012880818c0e1de00d.png@112w_112h.png","尴尬":"cb321684ed5ce6eacdc2699092ab8fe7679e4fda.png@112w_112h.png","冷":"cb0ebbd0668640f07ebfc0e03f7a18a8cd00b4ed.png@112w_112h.png","灵魂出窍":"43d3db7d97343c01b47e22cfabeca84b4251f35a.png@112w_112h.png","委屈":"d2f26cbdd6c96960320af03f5514c5b524990840.png@112w_112h.png","傲娇":"010540d0f61220a0db4922e4a679a1d8eca94f4e.png@112w_112h.png","疼":"905fd9a99ec316e353b9bd4ecd49a5f0a301eabf.png@112w_112h.png","吓":"9c10c5ebc7bef27ec641b8a1877674e0c65fea5d.png@112w_112h.png","生病":"0f25ce04ae1d7baf98650986454c634f6612cb76.png@112w_112h.png","吐":"06946bfe71ac48a6078a0b662181bb5cad09decc.png@112w_112h.png","嘘声":"e64af664d20716e090f10411496998095f62f844.png@112w_112h.png","捂眼":"c5c6d6982e1e53e478daae554b239f2b227b172b.png@112w_112h.png","思考":"cfa9b7e89e4bfe04bbcd34ccb1b0df37f4fa905c.png@112w_112h.png","再见":"fc510306bae26c9aec7e287cdf201ded27b065b9.png@112w_112h.png","翻白眼":"eba54707c7168925b18f6f8b1f48d532fe08c2b1.png@112w_112h.png","哈欠":"888d877729cbec444ddbd1cf4c9af155a7a06086.png@112w_112h.png","奋斗":"bb2060c15dba7d3fd731c35079d1617f1afe3376.png@112w_112h.png","墨镜":"3a03aebfc06339d86a68c2d893303b46f4b85771.png@112w_112h.png","撇嘴":"531863568e5668c5ac181d395508a0eeb1f0cda4.png@112w_112h.png","难过":"a651db36701610aa70a781fa98c07c9789b11543.png@112w_112h.png","抓狂":"4c87afff88c22439c45b79e9d2035d21d5622eba.png@112w_112h.png","生气":"3195714219c4b582a4fb02033dd1519913d0246d.png@112w_112h.png","视频卫星":"dce6fc7d6dfeafff01241924db60f8251cca5307.png@112w_112h.png","11周年":"d3b2d5dc028c75ae4df379f4c3afbe186d0f6f9b.png@112w_112h.png","鸡腿":"c7860392815d345fa69c4f00ef18d67dccfbd574.png@112w_112h.png","干杯":"8da12d5f55a2c7e9778dcc05b40571979fe208e6.png@112w_112h.png","爱心":"ed04066ea7124106d17ffcaf75600700e5442f5c.png@112w_112h.png","锦鲤":"643d6c19c8164ffd89e3e9cdf093cf5d773d979c.png@112w_112h.png","胜利":"b49fa9f4b1e7c3477918153b82c60b114d87347c.png@112w_112h.png","加油":"c7aaeacb21e107292d3bb053e5abde4a4459ed30.png@112w_112h.png","保佑":"fafe8d3de0dc139ebe995491d2dac458a865fb30.png@112w_112h.png","抱拳":"89516218158dbea18ab78e8873060bf95d33bbbe.png@112w_112h.png","响指":"1b5c53cf14336903e1d2ae3527ca380a1256a077.png@112w_112h.png","支持":"3c210366a5585706c09d4c686a9d942b39feeb50.png@112w_112h.png","拥抱":"41780a4254750cdaaccb20735730a36044e98ef3.png@112w_112h.png","怪我咯":"07cc6077f7f7d75b8d2c722dd9d9828a9fb9e46d.png@112w_112h.png","跪了":"f2b3aee7e521de7799d4e3aa379b01be032698ac.png@112w_112h.png","黑洞":"e90ec4c799010f25391179118ccd9f66b3b279ba.png@112w_112h.png","老鼠":"8e6fb491eb1bb0d5862e7ec8ccf9a3da12b6c155.png@112w_112h.png","福到了":"5de5373d354c373cf1617b6b836f3a8d53c5a655.png@112w_112h.png","加油武汉":"eb966aaa5b690d3f9308a9f936f5b5a72a7f956b.png@112w_112h.png"},
      enableQQ: false,
      path: window.location.pathname,
    }

    if (true) { 
      initData.requiredFields= ('nick,mail'.split(','))
    }
    
    if (false) {
      const otherData = false
      initData = Object.assign(initData, otherData)
    }
    
    const valine = new Valine(initData)
  }

  if (typeof Valine === 'function') initValine() 
  else getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js').then(initValine)
}

if ('Valine' === 'Valine' || !false) {
  if (false) btf.loadComment(document.getElementById('vcomment'),loadValine)
  else setTimeout(loadValine, 0)
} else {
  function loadOtherComment () {
    loadValine()
  }
}</script></div><script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="false"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>